<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="test">
			<input type="text" id="name" v-model="name" @keyup.enter="Add"
			@keyup.113="ft" v-focus = "focus" />
			<table>
				<thead>
					<tr>
						<td>name</td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="item in list">
						<td>{{ item }}</td>
					</tr>
				</tbody>
			</table>
		</div>
		<script>
			//自定义修饰符
			Vue.config.keyCodes = {
				f2: 113,
			};
			//注册一个全局指令
			//使用钩子函数：bind、inserted
			// Vue.directive('focus',{
			// 	//bind一般只会执行一次，主要用来设置初始化的属性
			// 	bind: function(el){
			// 		console.log('bind');
			// 		el.style.color = 'red';
			// 		el.style.fontWeight = 700
			// 	},
			// 	inserted: function(el,binding){
			// 		console.log('focus')
			// 		console.log(binding)
			// 		el.focus()
			// 		focus = binding.value
			// 		focus()
					
			// 	}
			// })
			var vue = new Vue({
				el:'#test',
				//局部定义一个指令
				directives:{
					focus:{
						inserted: function(el,binding){
							console.log('focus')
							console.log(binding)
							el.focus()
							focus = binding.value
							focus()
							
						}
					}
				},
				data:{
					list:['wzy','xjc'],
					name:''
				},
				methods:{
					Add(){
						this.list.push(this.name)
					},
					ft(){
						alert('f2!')
					},
					focus(){
						alert('focus!')
					}
				}
			})
		</script>
	</body>
</html>
